<template>
  <div class="container">
    <el-row :gutter="20">
      <el-col :span="8">
        <div class="area-container left-area">
          <div class="title-section">
            <h2 class="section-title">数字人形象选择</h2>
          </div>
          <div class="digital-human-section">
            <!-- Banner 轮播效果 -->
            <el-carousel
                height="220px"
                :autoplay="false"
                indicator-position="none"
                arrow="always"
                @change="handleCarouselChange"
            >
              <el-carousel-item
                  v-for="(item, index) in digitalHumanList"
                  :key="item.id"
              >
                <div class="banner-item" :class="{ active: index === currentIndex }">
                  <div class="pro-tag" v-if="item.isPro === '1'">Pro</div>
                  <img :src="item.url_image" :alt="item.name" />
                  <div class="banner-name">{{ item.name }}</div>
                </div>
              </el-carousel-item>
            </el-carousel>
            <div class="drive-section">
              <div class="button-group">
                <el-button
                    :type="driveType === 'text' ? 'primary' : 'default'"
                    @click="driveType = 'text'"
                >
                  文本驱动
                </el-button>
                <el-button
                    :type="driveType === 'audio' ? 'primary' : 'default'"
                    @click="driveType = 'audio'"
                >
                  音频驱动
                </el-button>
              </div>
              <!-- 文本驱动内容 -->
              <div v-if="driveType === 'text'" class="text-area-container">
                <el-input
                    v-model="formData.textContent"
                    type="textarea"
                    :rows="6"
                    placeholder="请输入文案进行仿写"
                    class="text-area"
                />
              </div>
              <!-- 音频驱动内容 -->
              <div v-if="driveType === 'audio'" class="audio-section">
                <el-button type="primary" class="upload-btn" @click="handleUploadAudio">
                  <el-icon><Upload /></el-icon>
                  上传音频
                </el-button>
                <div class="audio-list">
                  <div v-for="(audio, index) in audioList" :key="index" class="audio-item">
                    <div class="audio-info">
                      <el-icon><Document /></el-icon>
                      <span class="audio-name">{{ audio.name }}</span>
                    </div>
                    <div class="audio-actions">
                      <el-icon class="action-icon" @click="handleDeleteAudio(index)"><Delete /></el-icon>
                    </div>
                  </div>
                </div>
              </div>
              <div class="generate-count-row">
                <span class="generate-count-label">生成个数</span>
                <el-input-number v-model="generateCount" :min="0" size="large" class="beauty-counter" />
              </div>
              <div class="switch-row">
                <span class="switch-label">是否包装</span>
                <el-switch
                    v-model="formData.isPackaged"
                    class="custom-switch"
                />
              </div>
              <div class="generate-section">
                <el-button type="primary" class="generate-btn" @click="handleGenerate">
                  生成
                </el-button>
              </div>
            </div>
          </div>
        </div>
      </el-col>
      <el-col :span="16">
        <div class="area-container right-area">
          <!-- 右侧区域顶部内容 -->
          <div class="content-nav">
            <div class="disclaimer-text">内容为AI生成，你可以自定义修改或增减，您对该内容的使用应严格遵循国家相关法律法规的规定</div>
            <div class="nav-right">
              <button class="nav-btn" @click="handleVideoLibrary">
                <el-icon class="btn-icon"><VideoCamera /></el-icon>
                视频库
              </button>
            </div>
          </div>
          <!-- 右侧区域中间内容 -->
          <div style="max-height: 60vh; overflow-y: auto; padding-right: 4px;">
            <div v-for="(item, idx) in streamContent" :key="idx" style="margin-bottom: 16px;">
              <el-input
                  type="textarea"
                  :rows="4"
                  v-model="streamContent[idx]"
                  placeholder="内容"
                  style="width: 100%;"
              />
              <div style="display: flex; justify-content: space-between; align-items: center; margin-top: 4px;">
                <el-button type="text" style="color: #f56c6c;" @click="handleDeleteContent(idx)">删除</el-button>
                <div style="display: flex; gap: 8px;">
                  <el-button
                    v-if="audioUrls[idx]"
                    type="text"
                    style="color: #67C23A;"
                    @click="handlePlayAudio(idx)"
                  >
                    试听
                  </el-button>
                  <el-button type="text" style="color: #409EFF;" @click="handleConvertToAudio(idx)">转音频</el-button>
                </div>
              </div>
            </div>
          </div>
          <!-- 右侧区域底部内容 -->
          <div class="fixed-bottom-bar">
            <span style="font-size: 16px; color: #fff; margin-right: 18px;">生成{{ streamContent.length }}条视频</span>
            <el-button type="primary" style="font-size: 15px;" @click="handleGenerateVideo">
              <el-icon style="vertical-align: middle; margin-right: 4px;"><i class="el-icon-s-promotion" /></el-icon>
              生成视频
            </el-button>
          </div>
        </div>
      </el-col>
    </el-row>
  </div>

  <!-- 任务名称输入弹出框 -->
  <el-dialog
    v-model="dialogVisible"
    title="请输入任务名称"
    width="400px"
    :close-on-click-modal="false"
    :close-on-press-escape="false"
  >
    <el-input
      v-model="taskName"
      placeholder="请输入任务名称"
      clearable
      @keyup.enter="confirmTaskName"
    />
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="confirmTaskName">确认</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
import {onMounted, ref, computed} from 'vue'
import axiosUtil from '../../axios-util/axios-util'
import {VideoCamera, Plus, Upload, Document, Delete} from '@element-plus/icons-vue'
import { useRouter } from 'vue-router'
import LocalStorageUtil from "../../utils/LocalStorageUtil.ts";
import { ElLoading,ElMessage } from 'element-plus'
import utils from '../../utils/utils.ts';

//主题控制light  dark
const theme = utils.getTheme();

const router = useRouter()

const formData = ref({
  textContent: '',
  isPackaged: false
})

const generateCount = ref(0)

const streamContent = ref([]);
// 存储音频URL的数组，与streamContent对应
const audioUrls = ref([]);

onMounted(() => {
  initPersonVideo()
  initPersonVideoPro()
})

// 数字人列表数据
const digitalHumanList = ref([])

// 驱动类型
const driveType = ref('text')

// 音频列表
const audioList = ref([
  {
    name: '示例音频.mp3'
  }
])

const currentIndex = ref(0)
const handleCarouselChange = (index: number) => {
  currentIndex.value = index
}

const initPersonVideo = async () => {
  const response = await axiosUtil.post('api/digitalpeople/profilelist', {})
  if(response.data.code === 1){
    let data = response.data.data
    data.forEach(item => {
      item.isPro = '2'
    })
    digitalHumanList.value.push(...data)
  }
}

const initPersonVideoPro = async () => {
  const response = await axiosUtil.post('api/digitalpeople/profilelist', {
    "protype": 2
  })
  if(response.data.code === 1){
    let data = response.data.data
    data.forEach(item => {
      item.isPro = '1'
    })
    digitalHumanList.value.push(...data)
  }
}

const prevBanner = () => {
  const len = digitalHumanList.value.length;
  currentIndex.value = (currentIndex.value - 1 + len) % len;
};
const nextBanner = () => {
  const len = digitalHumanList.value.length;
  currentIndex.value = (currentIndex.value + 1) % len;
};
const selectBanner = (idx: number) => {
  if (idx === 0) prevBanner();
  if (idx === 2) nextBanner();
};

const handleSelectDigitalHuman = () => {
  // 处理选择数字人的逻辑
}

const handleVideoLibrary = () => {
  router.push('/videoWarehouse')
}

// 处理上传音频
const handleUploadAudio = () => {
  // 处理上传音频的逻辑
  console.log('上传音频')
}

// 处理删除音频
const handleDeleteAudio = (index: number) => {
  audioList.value.splice(index, 1)
}

// loading 动态文本
const loadingTexts = [
  '文案生成中',
];
// 音频转换 loading 动态文本
const audioLoadingTexts = [
  '音频转换中',
];
let loadingIndex = 0;
let loadingTextTimer: any = null;
let loadingInstance: any = null;
// 音频转换 loading 相关变量
let audioLoadingIndex = 0;
let audioLoadingTextTimer: any = null;
let audioLoadingInstance: any = null;

const handleGenerate = async () => {
  // 开启 loading
  loadingIndex = 0;
  loadingInstance = ElLoading.service({
    lock: true,
    text: loadingTexts[0],
    background: 'rgba(0, 0, 0, 0.7)'
  });
  loadingTextTimer = setInterval(() => {
    loadingIndex = (loadingIndex + 1) % loadingTexts.length;
    if (loadingInstance) loadingInstance.setText(loadingTexts[loadingIndex]);
  }, 1200);

  streamContent.value = [];
  try {
    const url = "https://qianwen1.zhanacun.com/api/aliyun_tongyi/qian_wen/get_index_max?question="
        + encodeURIComponent(formData.value.textContent)
        + "&num=" + generateCount.value
        + "&types=数字人模型&format=标题 跟 内容&original_keywords=原文"
        + "&model=&keywords=&token=" + LocalStorageUtil.get("token")
        + "&storeid=" + LocalStorageUtil.get("id");

    const response = await fetch(url, { method: 'GET' });
    if (!response.body) {
      streamContent.value = ['无法获取流式数据'];
      return;
    }
    const reader = response.body.getReader();
    const decoder = new TextDecoder('utf-8');
    let done = false;
    let lastGptMessage = '';
    let buffer = '';
    while (!done) {
      const { value, done: readerDone } = await reader.read();
      if (value) {
        buffer += decoder.decode(value, { stream: true });
        // 处理多条消息（有可能一次读到多条 event）
        const lines = buffer.split('\n');
        buffer = lines.pop() || ''; // 剩下的部分留给下次
        for (let i = 0; i < lines.length; i++) {
          const line = lines[i];
          if (line.trim().startsWith('event: gpt_message')) {
            // 下一个非空行就是 data
            let j = i + 1;
            while (j < lines.length && lines[j].trim() === '') j++;
            const dataLine = lines[j];
            if (dataLine && dataLine.trim().startsWith('data:')) {
              try {
                const dataStr = dataLine.trim().replace(/^data:\s*/, '');
                const dataObj = JSON.parse(dataStr);
                if (
                    dataObj &&
                    dataObj.data &&
                    dataObj.data.message &&
                    dataObj.data.message.content
                ) {
                  lastGptMessage = dataObj.data.message.content;
                }
              } catch (e) {
                // 忽略解析错误
              }
            }
          }
        }
      }
      done = readerDone;
    }
    // 用\n分割，过滤空行
    streamContent.value = lastGptMessage
        ? lastGptMessage.split('\n').filter(line => line.trim() !== '')
        : ['未获取到有效内容'];
  } catch (e) {
    streamContent.value = ['请求出错：' + e];
  } finally {
    // 关闭 loading
    clearInterval(loadingTextTimer);
    if (loadingInstance) loadingInstance.close();
  }
};

// 删除streamContent中某项
const handleDeleteContent = (idx: number) => {
  streamContent.value.splice(idx, 1)
  // 同时删除对应的音频URL
  audioUrls.value.splice(idx, 1)
}
// 转音频事件
const handleConvertToAudio = async (idx: number) => {
  // 获取当前banner对象
  const currentBanner = digitalHumanList.value[currentIndex.value];
  if(!currentBanner.voice_id){
    ElMessage.warning("请先选择音色");
    return;
  }

  // 开启音频转换 loading
  audioLoadingIndex = 0;
  audioLoadingInstance = ElLoading.service({
    lock: true,
    text: audioLoadingTexts[0],
    background: 'rgba(0, 0, 0, 0.7)'
  });
  audioLoadingTextTimer = setInterval(() => {
    audioLoadingIndex = (audioLoadingIndex + 1) % audioLoadingTexts.length;
    if (audioLoadingInstance) audioLoadingInstance.setText(audioLoadingTexts[audioLoadingIndex]);
  }, 1200);

  try {
    const response = await axiosUtil.post('api/volcengine/SubmitAudioProduceJob', {
      "text": streamContent.value[idx],
      "voice": currentBanner.voice
    })

    if(response.data.url){
      // 保存音频URL到对应位置
      audioUrls.value[idx] = response.data.url;
      ElMessage.success("音频生成成功！");
    }
  } catch (error) {
    ElMessage.error("音频生成失败，请重试");
  } finally {
    // 关闭音频转换 loading
    clearInterval(audioLoadingTextTimer);
    if (audioLoadingInstance) audioLoadingInstance.close();
  }

  console.log('当前banner对象:', currentBanner);
  // 这里实现转音频的逻辑
  console.log('转音频', streamContent.value[idx])
}

// 试听音频事件
const handlePlayAudio = (idx: number) => {
  const audioUrl = audioUrls.value[idx];
  if (audioUrl) {
    const audio = new Audio(audioUrl);
    audio.play().catch(error => {
      console.error('播放音频失败:', error);
      ElMessage.error("播放音频失败，请重试");
    });
  }
}

// 任务名称输入框的响应式数据
const taskName = ref('')
const dialogVisible = ref(false)

// 生成视频按钮事件
const handleGenerateVideo = async () => {
  // 先弹出输入框
  dialogVisible.value = true
}

// 确认任务名称后的处理函数
const confirmTaskName = async () => {
  if (!taskName.value.trim()) {
    ElMessage.warning('请输入任务名称')
    return
  }

  dialogVisible.value = false

  // 这里实现生成视频的逻辑
  let audioData = []
  //获取当前banner对象
  const currentBanner = digitalHumanList.value[currentIndex.value];
  if(currentBanner.voice_id){
    // 使用 for...of 循环替代 forEach，这样可以正确使用 await
    for (const item of streamContent.value) {
      try {
        const response = await axiosUtil.post('api/volcengine/SubmitAudioProduceJob', {
          "text": item,
          "voice": currentBanner.voice
        })
        // 处理响应数据
        if (response.data.url) {
          audioData.push({
            "url": response.data.url,
            "url_image": "",
            "mediaId": "",
            "height": "",
            "width": "",
            "duration": response.data.duration,
            "type": response.data.type,
            "text": taskName.value
          })
        }
      } catch (error) {
        console.error('音频生成失败:', error)
        ElMessage.error(`音频生成失败: ${item}`)
      }
    }
  }
  const personRes = await axiosUtil.post('api/digitalpeople/adddigitalpeople', {
    "video_url_audio": encodeURIComponent(JSON.stringify(audioData)),
    "title": taskName.value,
    "ossnum": streamContent.value.length,
    "profile_id": currentBanner.id,
    "packing_id": 0,
    "pc_status": 0,
    "protype": ""
  })
  if(personRes.data.code===1){
    const listRes = await axiosUtil.post('api/digitalpeople/list', {
      "id": personRes.data.data.id,
      "offset": 1,
      "type": 2,
      "status": "",
      "limit": streamContent.value.length,
      "title": taskName.value,
      "ids": "",
      "protype": ""
    })
    if(listRes.data.code===1){
      if(listRes.data.data.data.status === 3){
        //此时生成完毕，定时器停止
      }
    }
  }else {
    ElMessage.error("生成失败，请重试");
  }
}
</script>

<style scoped>
.container {
  width: 100%;
  height: 100%;
  padding: 20px;
}

.el-row {
  height: 100%;
  margin: 0 !important;
}

.el-col {
  height: 100%;
}

.area-container {
  height: 100%;
  background: v-bind('theme === "light" ? "rgba(255, 255, 255, 0.1)" : "rgba(0, 0, 0, 0.3)"');
  backdrop-filter: blur(10px);
  border-radius: 12px;
  border: 1px solid v-bind('theme === "light" ? "rgba(255, 255, 255, 0.2)" : "rgba(0, 0, 0, 0.4)"');
  box-shadow: 0 4px 6px v-bind('theme === "light" ? "rgba(0, 0, 0, 0.1)" : "rgba(0, 0, 0, 0.3)"');
  transition: all 0.3s ease;
  padding: 15px;
}

.area-container:hover {
  background: v-bind('theme === "light" ? "rgba(255, 255, 255, 0.15)" : "rgba(0, 0, 0, 0.4)"');
  box-shadow: 0 6px 12px v-bind('theme === "light" ? "rgba(0, 0, 0, 0.15)" : "rgba(0, 0, 0, 0.4)"');
  border-color: v-bind('theme === "light" ? "rgba(255, 255, 255, 0.3)" : "rgba(0, 0, 0, 0.5)"');
}

.left-area {
  overflow-y: auto;
}

.left-area::-webkit-scrollbar {
  width: 6px;
}

.left-area::-webkit-scrollbar-thumb {
  background: v-bind('theme === "light" ? "rgba(0, 0, 0, 0.3)" : "rgba(255, 255, 255, 0.3)"');
  border-radius: 3px;
}

.left-area::-webkit-scrollbar-track {
  background: v-bind('theme === "light" ? "rgba(0, 0, 0, 0.1)" : "rgba(255, 255, 255, 0.1)"');
}

.right-area {
  display: flex;
  flex-direction: column;
}

.content-nav {
  height: 60px;
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 20px;
  background: transparent;
  border: none;
  box-shadow: none;
  margin-bottom: 20px;
}

.area-container:hover {
  background: v-bind('theme === "light" ? "rgba(255, 255, 255, 0.15)" : "rgba(0, 0, 0, 0.4)"');
  box-shadow: 0 6px 12px v-bind('theme === "light" ? "rgba(0, 0, 0, 0.15)" : "rgba(0, 0, 0, 0.4)"');
  border-color: v-bind('theme === "light" ? "rgba(255, 255, 255, 0.3)" : "rgba(0, 0, 0, 0.5)"');
}

.menu-container {
  overflow-y: auto;
}

.menu-title {
  color: #fff;
  font-size: 16px;
  font-weight: 500;
  white-space: nowrap;
  padding: 0;
  margin: 0;
  border: none;
}

.sub-menu-title {
  color: #fff;
  font-size: 16px;
  font-weight: 500;
  padding: 10px 0;
  margin-bottom: 10px;
  text-align: left;
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}

.center-area, .right-area {
  min-height: 70vh;
}

.menu-container::-webkit-scrollbar {
  width: 6px;
}

.menu-container::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.3);
  border-radius: 3px;
}

.menu-container::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.1);
}

.menu-item {
  margin-bottom: 15px;
}

.parent-menu {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 15px;
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.3s ease;
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: #fff;
  font-weight: 500;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.parent-menu:hover {
  background: rgba(255, 255, 255, 0.2);
  transform: translateY(-2px);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
}

.expand-icon {
  transition: transform 0.3s ease;
  color: #fff;
}

.expand-icon.is-expanded {
  transform: rotate(180deg);
}

.child-menu {
  margin-top: 8px;
  padding: 5px;
  animation: slideDown 0.3s ease;
}

@keyframes slideDown {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.child-item {
  padding: 10px 15px;
  margin: 8px 0;
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.3s ease;
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: #fff;
  font-size: 0.95em;
  text-align: center;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.child-item:hover {
  background: rgba(255, 255, 255, 0.2);
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
  border-color: rgba(255, 255, 255, 0.4);
}

.child-item:active {
  transform: translateY(0);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.child-item.selected {
  background: rgba(64, 158, 255, 0.3);
  border-color: rgba(64, 158, 255, 0.5);
  color: #fff;
  box-shadow: 0 4px 8px rgba(64, 158, 255, 0.2);
}

.spacer {
  height: 5vh;
  width: 100%;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  padding: 0 20px;
  margin-top: 3vh;
}

.nav-right {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.nav-btn {
  background: v-bind('theme === "light" ? "rgba(255, 255, 255, 0.1)" : "rgba(0, 0, 0, 0.3)"');
  border: 1px solid v-bind('theme === "light" ? "rgba(0, 0, 0, 0.2)" : "rgba(255, 255, 255, 0.2)"');
  color: v-bind('theme === "light" ? "rgba(0, 0, 0, 0.8)" : "#fff"');
  padding: 8px 20px;
  border-radius: 0;
  cursor: pointer;
  font-size: 14px;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  gap: 6px;
}

.nav-btn:hover {
  background: v-bind('theme === "light" ? "rgba(255, 255, 255, 0.2)" : "rgba(0, 0, 0, 0.4)"');
  border-color: v-bind('theme === "light" ? "rgba(0, 0, 0, 0.3)" : "rgba(255, 255, 255, 0.3)"');
  box-shadow: 0 0 10px v-bind('theme === "light" ? "rgba(0, 0, 0, 0.2)" : "rgba(255, 255, 255, 0.2)"');
}

.btn-icon {
  font-size: 16px;
}

.title-section {
  margin-bottom: 20px;
}

.section-title {
  color: v-bind('theme === "light" ? "rgba(0, 0, 0, 0.8)" : "#fff"');
  font-size: 18px;
  font-weight: 500;
  margin: 0;
  padding-bottom: 10px;
  border-bottom: 1px solid v-bind('theme === "light" ? "rgba(0, 0, 0, 0.3)" : "rgba(255, 255, 255, 0.3)"');
}

.digital-human-section {
  padding: 10px 0;
}

.select-btn {
  width: 100%;
  margin-bottom: 15px;
  background: v-bind('theme === "light" ? "rgba(64, 158, 255, 0.2)" : "rgba(0, 0, 0, 0.3)"');
  border: 1px solid v-bind('theme === "light" ? "rgba(64, 158, 255, 0.3)" : "rgba(255, 255, 255, 0.2)"');
  color: v-bind('theme === "light" ? "rgba(0, 0, 0, 0.8)" : "#fff"');
}

.select-btn:hover {
  background: v-bind('theme === "light" ? "rgba(64, 158, 255, 0.3)" : "rgba(0, 0, 0, 0.4)"');
}

.digital-human-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.list-item {
  margin-bottom: 10px;
  padding: 8px;
  background: v-bind('theme === "light" ? "rgba(255, 255, 255, 0.05)" : "rgba(0, 0, 0, 0.2)"');
  border-radius: 6px;
  transition: all 0.3s ease;
}

.list-item:hover {
  background: v-bind('theme === "light" ? "rgba(255, 255, 255, 0.1)" : "rgba(0, 0, 0, 0.3)"');
}

.item-content {
  display: flex;
  align-items: center;
  gap: 10px;
}

.item-image {
  width: 40px;
  height: 40px;
  border-radius: 4px;
  object-fit: cover;
}

.item-name {
  color: v-bind('theme === "light" ? "rgba(0, 0, 0, 0.8)" : "#fff"');
  font-size: 14px;
}

:deep(.el-checkbox__label) {
  color: #fff;
}

:deep(.el-checkbox__input.is-checked .el-checkbox__inner) {
  background-color: #409EFF;
  border-color: #409EFF;
}

.drive-section {
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.button-group {
  display: flex;
  gap: 0;
  background: v-bind('theme === "light" ? "rgba(0, 0, 0, 0.1)" : "rgba(255, 255, 255, 0.1)"');
  padding: 4px;
  border-radius: 6px;
  box-shadow: inset 0 2px 4px v-bind('theme === "light" ? "rgba(0, 0, 0, 0.1)" : "rgba(0, 0, 0, 0.2)"');
  margin-bottom: 15px;
  flex-shrink: 0;
}

.button-group .el-button {
  border-radius: 0;
  margin: 0;
  flex: 1;
  height: 40px;
  font-weight: 500;
  transition: all 0.3s ease;
  border: none;
  background: transparent;
  color: v-bind('theme === "light" ? "rgba(0, 0, 0, 0.8)" : "rgba(255, 255, 255, 0.8)"');
}

.button-group .el-button:first-child {
  border-top-left-radius: 4px;
  border-bottom-left-radius: 4px;
}

.button-group .el-button:last-child {
  border-top-right-radius: 4px;
  border-bottom-right-radius: 4px;
}

.button-group .el-button:hover {
  background: v-bind('theme === "light" ? "rgba(0, 0, 0, 0.1)" : "rgba(255, 255, 255, 0.1)"');
  color: v-bind('theme === "light" ? "#000" : "#fff"');
}

.button-group .el-button.el-button--primary {
  background: v-bind('theme === "light" ? "rgba(64, 158, 255, 0.2)" : "rgba(0, 0, 0, 0.3)"');
  color: v-bind('theme === "light" ? "rgba(0, 0, 0, 0.8)" : "#fff"');
  box-shadow: 0 2px 8px v-bind('theme === "light" ? "rgba(0, 0, 0, 0.2)" : "rgba(0, 0, 0, 0.3)"');
}

.button-group .el-button.el-button--primary:hover {
  background: v-bind('theme === "light" ? "rgba(64, 158, 255, 0.3)" : "rgba(0, 0, 0, 0.4)"');
}

.button-group .el-button.el-button--default {
  background: transparent;
  color: rgba(255, 255, 255, 0.8);
}

.button-group .el-button.el-button--default:hover {
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
}

.text-area-container {
  margin-top: 15px;
  background: v-bind('theme === "light" ? "rgba(255, 255, 255, 0.05)" : "rgba(0, 0, 0, 0.2)"');
  border-radius: 8px;
  padding: 2px;
  box-shadow: inset 0 2px 4px v-bind('theme === "light" ? "rgba(0, 0, 0, 0.1)" : "rgba(0, 0, 0, 0.2)"');
}

.text-area :deep(.el-textarea__inner) {
  background: v-bind('theme === "light" ? "rgba(255, 255, 255, 0.1)" : "rgba(0, 0, 0, 0.3)"');
  border: 1px solid v-bind('theme === "light" ? "rgba(0, 0, 0, 0.2)" : "rgba(255, 255, 255, 0.2)"');
  color: v-bind('theme === "light" ? "rgba(0, 0, 0, 0.8)" : "#fff"');
  backdrop-filter: blur(5px);
  transition: all 0.3s ease;
  font-size: 14px;
  line-height: 1.5;
  resize: none;
}

.text-area :deep(.el-textarea__inner:focus) {
  background: v-bind('theme === "light" ? "rgba(255, 255, 255, 0.15)" : "rgba(0, 0, 0, 0.4)"');
  border-color: v-bind('theme === "light" ? "rgba(0, 0, 0, 0.4)" : "rgba(255, 255, 255, 0.4)"');
  box-shadow: 0 0 0 2px v-bind('theme === "light" ? "rgba(0, 0, 0, 0.1)" : "rgba(255, 255, 255, 0.1)"');
}

.text-area :deep(.el-textarea__inner::placeholder) {
  color: v-bind('theme === "light" ? "rgba(0, 0, 0, 0.6)" : "rgba(255, 255, 255, 0.6)"');
}

.audio-section {
  margin-top: 15px;
}

.upload-btn {
  width: 100%;
  margin-bottom: 15px;
  background: v-bind('theme === "light" ? "rgba(64, 158, 255, 0.2)" : "rgba(0, 0, 0, 0.3)"');
  border: 1px solid v-bind('theme === "light" ? "rgba(64, 158, 255, 0.3)" : "rgba(255, 255, 255, 0.2)"');
  color: v-bind('theme === "light" ? "rgba(0, 0, 0, 0.8)" : "#fff"');
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.upload-btn:hover {
  background: v-bind('theme === "light" ? "rgba(64, 158, 255, 0.3)" : "rgba(0, 0, 0, 0.4)"');
}

.audio-list {
  background: v-bind('theme === "light" ? "rgba(255, 255, 255, 0.05)" : "rgba(0, 0, 0, 0.2)"');
  border-radius: 8px;
  padding: 10px;
}

.audio-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px;
  background: v-bind('theme === "light" ? "rgba(255, 255, 255, 0.1)" : "rgba(0, 0, 0, 0.3)"');
  border-radius: 6px;
  margin-bottom: 8px;
}

.audio-item:last-child {
  margin-bottom: 0;
}

.audio-info {
  display: flex;
  align-items: center;
  gap: 8px;
  color: v-bind('theme === "light" ? "rgba(0, 0, 0, 0.8)" : "#fff"');
}

.audio-name {
  font-size: 14px;
}

.audio-actions {
  display: flex;
  gap: 8px;
}

.action-icon {
  color: rgba(255, 255, 255, 0.6);
  cursor: pointer;
  transition: all 0.3s ease;
}

.action-icon:hover {
  color: #ff4d4f;
}

.switch-section {
  display: none;
}

.custom-switch {
  --el-switch-on-color: #409EFF;
  --el-switch-off-color: rgba(255, 255, 255, 0.2);
}

.generate-section {
  margin-top: 20px;
  display: flex;
  justify-content: center;
}

.generate-btn {
  width: 120px;
  height: 40px;
  background: v-bind('theme === "light" ? "rgba(64, 158, 255, 0.2)" : "rgba(0, 0, 0, 0.3)"');
  border: 1px solid v-bind('theme === "light" ? "rgba(64, 158, 255, 0.3)" : "rgba(255, 255, 255, 0.2)"');
  color: v-bind('theme === "light" ? "rgba(0, 0, 0, 0.8)" : "#fff"');
  font-size: 16px;
  transition: all 0.3s ease;
}

.generate-btn:hover {
  background: v-bind('theme === "light" ? "rgba(64, 158, 255, 0.3)" : "rgba(0, 0, 0, 0.4)"');
  transform: translateY(-2px);
  box-shadow: 0 4px 12px v-bind('theme === "light" ? "rgba(64, 158, 255, 0.2)" : "rgba(0, 0, 0, 0.3)"');
}

.generate-btn:active {
  transform: translateY(0);
}

.title-row {
  display: flex;
  align-items: center;
  gap: 15px;
  padding: 10px 0;
  margin-bottom: 10px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}

.disclaimer-text {
  color: v-bind('theme === "light" ? "rgba(0, 0, 0, 0.6)" : "rgba(255, 255, 255, 0.6)"');
  font-size: 13px;
  line-height: 1.5;
  text-shadow: 0 1px 2px v-bind('theme === "light" ? "rgba(0, 0, 0, 0.2)" : "rgba(0, 0, 0, 0.4)"');
  flex: 1;
  margin-right: 20px;
}

.banner-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
}
.banner-btn {
  background: rgba(0,0,0,0.1);
  border: none;
  font-size: 28px;
  width: 40px;
  height: 80px;
  cursor: pointer;
  color: #409EFF;
  border-radius: 8px;
  transition: background 0.2s;
}
.banner-btn:hover {
  background: #409EFF;
  color: #fff;
}
.banner-list {
  display: flex;
  align-items: center;
  gap: 20px;
  width: 420px; /* 3*140px */
  will-change: transform;
}
.banner-item {
  position: relative;
  width: 140px;
  height: 200px;
  margin: 0 auto;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  background: #fff;
  opacity: 0.6;
  transform: scale(0.85);
  transition: all 0.3s;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.banner-item.active {
  opacity: 1;
  transform: scale(1.1);
  box-shadow: 0 4px 16px #409EFF33;
}
.banner-item img {
  width: 100%;
  height: 80%;
  object-fit: cover;
}
.banner-name {
  text-align: center;
  font-size: 16px;
  color: #333;
  margin-top: 6px;
}
.banner-slide-enter-active, .banner-slide-leave-active {
  transition: all 0.4s cubic-bezier(.55,0,.1,1);
}
.banner-slide-enter-from {
  opacity: 0;
  transform: translateX(60px) scale(0.85);
}
.banner-slide-leave-to {
  opacity: 0;
  transform: translateX(-60px) scale(0.85);
}
.pro-tag {
  position: absolute;
  top: 8px;
  left: 8px;
  background: #ff9800;
  color: #fff;
  font-size: 12px;
  font-weight: bold;
  padding: 2px 8px;
  border-radius: 8px;
  z-index: 2;
  box-shadow: 0 2px 6px rgba(0,0,0,0.08);
}
.switch-row {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 20px;
}
.switch-label {
  font-size: 15px;
  color: #222;
  font-weight: 400;
}
.generate-count-row {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 12px;
  background: linear-gradient(90deg, #eaf4ff 0%, #f7fbff 100%);
  box-shadow: 0 2px 8px rgba(64,158,255,0.08);
  border: 1px solid #e0eaff;
}
.generate-count-label {
  font-size: 15px;
  color: #222;
  font-weight: 400;
}
.generate-count-row, .switch-row {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-bottom: 16px;
  background: v-bind('theme === "light" ? "rgba(64,158,255,0.06)" : "rgba(0,0,0,0.18)"');
  border-radius: 8px;
  padding: 10px 18px 10px 14px;
  box-shadow: 0 2px 8px v-bind('theme === "light" ? "rgba(64,158,255,0.08)" : "rgba(0,0,0,0.18)"');
  width: fit-content;
  min-width: 220px;
}
.generate-count-label, .switch-label {
  font-size: 15px;
  color: #222;
  font-weight: 500;
  letter-spacing: 1px;
  min-width: 70px;
}
.el-input-number, .custom-switch {
  border-radius: 6px !important;
  box-shadow: 0 1px 4px v-bind('theme === "light" ? "rgba(64,158,255,0.10)" : "rgba(0,0,0,0.22)"');
  background: v-bind('theme === "light" ? "#fff" : "#222"');
  transition: box-shadow 0.2s;
}
.el-input-number:hover, .custom-switch:hover {
  box-shadow: 0 2px 8px v-bind('theme === "light" ? "rgba(64,158,255,0.18)" : "rgba(0,0,0,0.28)"');
}
.beauty-counter {
  --el-input-number-width: 140px;
  --el-input-border-radius: 10px;
  --el-input-bg-color: #f4f8ff;
  --el-input-border-color: #a0cfff;
  --el-input-hover-border-color: #409eff;
  --el-input-focus-border-color: #409eff;
  --el-input-box-shadow: 0 2px 8px rgba(64,158,255,0.10);
  --el-input-font-size: 18px;
  --el-input-number-handler-bg-color: #e6f0ff;
  --el-input-number-handler-hover-bg-color: #409eff;
  --el-input-number-handler-color: #409eff;
  --el-input-number-handler-hover-color: #fff;
  width: var(--el-input-number-width);
  border-radius: var(--el-input-border-radius);
  background: var(--el-input-bg-color);
  box-shadow: var(--el-input-box-shadow);
  font-size: var(--el-input-font-size);
  border: 1.5px solid var(--el-input-border-color);
  transition: border 0.2s, box-shadow 0.2s;
}
.beauty-counter:hover,
.beauty-counter:focus-within {
  border-color: var(--el-input-hover-border-color);
  box-shadow: 0 4px 16px rgba(64,158,255,0.18);
}
.beauty-counter :deep(.el-input__inner) {
  background: transparent;
  border: none;
  font-size: 18px;
  color: #222;
  text-align: center;
}
.beauty-counter :deep(.el-input-number__increase),
.beauty-counter :deep(.el-input-number__decrease) {
  background: var(--el-input-number-handler-bg-color);
  color: var(--el-input-number-handler-color);
  border-radius: 6px;
  transition: background 0.2s, color 0.2s;
}
.beauty-counter :deep(.el-input-number__increase:hover),
.beauty-counter :deep(.el-input-number__decrease:hover) {
  background: var(--el-input-number-handler-hover-bg-color);
  color: var(--el-input-number-handler-hover-color);
}
/* 美化右侧多行文本输入框父容器的滚动条样式 */
.right-area > div[style*='overflow-y: auto']::-webkit-scrollbar {
  width: 8px;
  background: transparent;
}
.right-area > div[style*='overflow-y: auto']::-webkit-scrollbar-thumb {
  background: rgba(0,0,0,0.18);
  border-radius: 6px;
  transition: background 0.2s;
}
.right-area > div[style*='overflow-y: auto']::-webkit-scrollbar-thumb:hover {
  background: rgba(64,158,255,0.35);
}
.right-area > div[style*='overflow-y: auto']::-webkit-scrollbar-track {
  background: transparent;
  border-radius: 6px;
}
/* 右侧底部操作栏固定样式 */
.fixed-bottom-bar {
  position: absolute;
  right: 24px;
  bottom: 24px;
  display: flex;
  align-items: center;
  z-index: 10;
  background: rgba(64,158,255,0.12);
  border-radius: 8px;
  padding: 10px 24px;
  box-shadow: 0 2px 12px rgba(64,158,255,0.08);
}
.fixed-bottom-bar .el-button {
  margin-left: 10px;
}

/* 任务名称弹出框样式 */
:deep(.el-dialog) {
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
}

:deep(.el-dialog__header) {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  padding: 20px 24px;
  margin: 0;
}

:deep(.el-dialog__title) {
  color: white;
  font-size: 18px;
  font-weight: 600;
}

:deep(.el-dialog__body) {
  padding: 24px;
}

:deep(.el-dialog__footer) {
  padding: 16px 24px;
  border-top: 1px solid #f0f0f0;
  background: #fafafa;
}

.dialog-footer {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
}

:deep(.el-dialog .el-input__inner) {
  border-radius: 8px;
  border: 2px solid #e4e7ed;
  transition: all 0.3s ease;
  font-size: 16px;
  padding: 12px 16px;
}

:deep(.el-dialog .el-input__inner:focus) {
  border-color: #409eff;
  box-shadow: 0 0 0 2px rgba(64, 158, 255, 0.2);
}

:deep(.el-dialog .el-button) {
  border-radius: 8px;
  padding: 10px 20px;
  font-weight: 500;
  transition: all 0.3s ease;
}

:deep(.el-dialog .el-button--primary) {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border: none;
}

:deep(.el-dialog .el-button--primary:hover) {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
}
</style>

